// import ... from ... 语句导入
// 带有大括号的是函数，不带大括号的组件
// 导入css样式，不需要from子句

// 从Vue框架导入createApp函数
import { createApp } from 'vue'

// 从当前路径下的App.vue文件导入App组件（根组件）
import App from './App.vue'

// 利用上面所导入的createApp()函数，创建一个vue应用
let app = createApp(App);

// 从element-plus框架导入ElementPlus组件
import ElementPlus from 'element-plus'

// 导入element-plus中文包（element-plus组件默认使用英语）
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 导入element-plus的css样式
import 'element-plus/dist/index.css'

// 导入路由
import router from "./router/router.js";

// 注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

import {doGet} from "./http/httpRequest.js";
// 自定义指令
app.directive("hasPermission", (el, binding) => {
    // 自定义指令在 mounted 和 updated 时都会调用

    // el：指令绑定到的元素，可以用于直接操作DOM
    // binding：一个对象，包含很多属性（例如：value属性，就是传递给指令的值）

    // 向后端发送请求，获取当前登录用户的信息
    doGet("/api/login/info", { }).then( (resp) => {
        // 获取用户的权限集合（权限标识符集合）
        let permissionList = resp.data.data.permissionList;
        // 遍历权限集合
        for (let key in permissionList) {
            // 获取权限和传入的值（指定权限）比较
            if (permissionList[key] === binding.value) {
                // 如果当前用户有指定权限，则不做任何操作，结束这个方法
                return ;
            }
        }
        // 程序执行到这里，说明没有指定权限，需要隐藏掉绑定的元素
        el.style.display = "none";
        // 或者删除掉绑定的元素（如果el元素的父节点存在的话，删除掉el这个子节点）
        // el.parentNode && el.parentNode.removeChild(el);
    })
})

// use是使用其他组件
// mount('#app') 将根组件挂载到id为app的标签内
app.use(ElementPlus, {locale: zhCn}).use(router).mount('#app')

